<template>
	<view class="container">
		<uni-list v-if="showStatus">
			<uni-list-item showExtraIcon="true" :extraIcon="{type: 'person-filled'}" title="饲料类型"
				:rightText="materialTypeList.materiaFeedType" />
			<uni-list-item showExtraIcon="true" :extraIcon="{type: 'chat-filled'}" title="备注">
				<template v-slot:footer>
					<input type="textarea" v-model="materialTypeList.remark"
						style="font-size: 12px;color: #999999;text-align: right;" />
				</template>
			</uni-list-item>
		</uni-list>
		<view class="button-group" v-if="showStatus">
			<button type="warn" plain="true" @click="materialTypeDelete" style="width: 45%;border: #E53F32 solid 1px;">删 除</button>
			<button type="primary" plain="ture" @click="materialTypeEdit" style="width: 45%;">修 改</button>
		</view>
		
		<!-- 修改 -->
		<view class="example" v-if="!showStatus">

		    <uni-forms-item label="饲料类型" name="materiaFeedType" required>
		      <uni-easyinput v-model="materialTypeForm.materiaFeedType" placeholder="请输入供应商" />
		    </uni-forms-item>

			<uni-forms-item label="备注">
				<uni-easyinput type="textarea" v-model="materialTypeForm.remark" placeholder="请输入备注" />
			</uni-forms-item>
		  </uni-forms>
		  <view class="edit-button-group">
		  	<button type="primary" @click="back" plain="true" style="width: 45%;">返 回</button>
		  	<button type="primary" @click="editMaterialType('form')" plain="true" style="width: 45%;">提 交</button>
		  </view>
		</view>
	</view>
</template>

<script>
	import {
		listType,
		addType,
		getType,
		updateType,
		delType
	} from "@/api/hmy/material";


	export default {
		data() {
			return {
				showStatus:true,
				materiaFeedTypeId: '',
				materialTypeList: {},
				materialTypeForm:{},
				rules: {
					
					materiaFeedPurchaseProvider: {
				  		rules: [{required: true, errorMessage: '供应商不能为空'}]
					},
				},
			}
		},
		onLoad(option) { //option为object类型，会序列化上个页面传递的参数
			this.materiaFeedTypeId = option.materiaFeedTypeId;
			this.getMaterialTypeInfo();
		},
		methods: {
			//获取进货记录
			getMaterialTypeInfo() {
				//显示加载框
				uni.showLoading({
					title:"加载中"
				})
				getType(this.materiaFeedTypeId).then(response => {
					this.materialTypeForm = response.data;
					this.materialTypeList = response.data;
					
					//隐藏加载框
					uni.hideLoading();
				})
			},

			//删除
			 materialTypeDelete() {
				console.log("delete", this.purchase.materiaFeedTypeId)
				this.$modal.confirm('是否确认删除进货编号为"' + this.purchase.materiaFeedTypeId + '"的数据项？').then(() => {
					return delType(this.purchase.materiaFeedTypeId);
				}).then(response => {
					this.$modal.msgSuccess("删除成功");
					setTimeout(()=>{
						this.$tab.navigateTo('/pages/hmy/material/materialType');
					},1000)
				}).catch(()=>{
				});
			},

			//修改
			materialTypeEdit() {
				console.log("edit", this.purchase.materiaFeedTypeId)
				//显示加载框
				uni.showLoading({
					title:"加载中"
				})
				this.showStatus = !this.showStatus;
				//隐藏加载框
				uni.hideLoading();
			},
			
			//返回
			back(){
				this.showStatus = !this.showStatus
				this.getMaterialTypeInfo();
			},
			
			//修改提交
			editMaterialType(form) {
			  this.$refs[form].validate().then(res => {
			    updateType(this.materialTypeForm).then(response => {
			      this.$modal.msgSuccess("修改成功");
				  setTimeout(()=>{
				  	this.$tab.navigateTo('/pages/hmy/material/materialType');
				  },1000)
				  
			    })
			  })
			}
		}
	}
</script>

<style>
	page {
		background-color: #ffffff;
	}

	.button-group {
		display: flex;
		justify-content: space-around;
		width:100%;
		position:fixed;
		bottom:5px;

	}
	
	.example {
	  padding: 15px;
	  background-color: #fff;
	}
	.edit-button-group{
		display: flex;
		justify-content: space-around;
	}
</style>